<template>
  <div id="comnent-copoment">
    <div class="c_title">
      <h3 class="user1">用户评价</h3>
      <a href="#" class="must">更多</a>
    </div>
    <div class="comtent">
      <img :src="comment_component.avatar" alt="" />
      <span class="user2">{{ comment_component.uname }}</span>
    </div>
    <p class="leirou">{{ comment_component.content }}</p>
    <div class="news">
      <span class="time">{{ comment_component.time | Sdate }}</span>
      <span class="goods_leixing">{{ comment_component.type }}</span>
    </div>
    <img
      :src="item"
      alt=""
      class="goods_img"
      v-for="(item, index) in comment_component.img"
      :key="index"
    />
  </div>
</template>

<script>
export default {
  name: "Comnent",
  props: {
    comment_component: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  filters: {
    //格式化封装
    Sdate(time) {
      //date接受的是毫秒  服务器传来的是秒  所以要乘以1000变成毫秒
      const times = new Date(time * 1000)
      const yyyy = times.getFullYear()
      const mm = times.getMonth() + 1
      const dd = times.getDay()

      const HH = times.getHours()
      const MM = times.getMinutes()
      const SS = times.getSeconds()
      return `${yyyy}-${mm}-${dd} ${HH}:${MM}:${SS}`
    },
  },
}
</script>

<style lang="less" scoped>
#comnent-copoment {
  padding: 1.3vw 3.2vw;
}
.c_title {
  display: flex;
  justify-content: space-between;
  line-height: 13vw;
  font-size: 12px;
  border-bottom: 1px solid #ccc;
  .user1 {
    font-weight: 400;
  }
}

.comtent {
  padding: 2.66667vw 0 1.33333vw;
  img {
    width: 11vw;
    height: 11vw;
    margin-right: 10px;
    vertical-align: middle;
  }
}

.news {
  color: #ccc;
  font-size: 12px;
  padding: 10px 0;
  .time {
    margin-right: 10px;
  }
}

.leirou {
  font-size: 12px;
}

.goods_img {
  width: 18vw;
  height: 18vw;
  margin-right: 5px;
  padding: 10px 0;
}
</style>
